<!DOCTYPE html>
<html class="ui-page-login">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>店铺-录像查看</title>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link href="css/style.css" rel="stylesheet" />
	<link href="css/reg_style.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css">
	<link rel="stylesheet" type="text/css" href="css/ljq.css" />
	<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
	<script src="js/swiper-3.4.2.min.js"></script>
	<style>
		.mui-btn,
		button,
		input[type=button],
		input[type=reset],
		input[type=submit] {
			background: none;
			color: #4198FF;
			border: none;
			padding: 5px 10px;
			border-radius: 10px;
			font-size: 0.15rem!important;
		}

		.mui-btn-blue,
		.mui-btn-primary,
		input[type=submit] {
			background: none;
			color: #4198FF;
			border: none;
			padding: 5px 10px;
			border-radius: 10px;
			font-size: 0.15rem!important;
		}

		.rili {
			height: 0.44rem;
		}

		.rili img {
			float: left;
			width: 0.17rem;
			height: 0.17rem;
			margin-top: 0.1rem;
			margin-left: 0.12rem;
		}

		.rili .wai {
			float: left;
			width: 2rem;
			margin-left: 0.1rem;
		}

		.rili .div {
			width: 2rem;
			margin-top: 0.1rem;
		}

		.rili span {
			font-size: 0.12rem;
			margin-left: 0.15rem;
		}

		.swiper-slide-prev {
			color: #808080;
		}

		.blue {
			color: #4198FF!important;
		}

		.jindu {
			width: 100%;
			height: 0.5rem;
			position: relative;
		}

		.daodian {
			margin-top: 0.15rem;
		}

		.daodian span {
			float: left;
			margin-left: 0.12rem;
			font-size: 0.14rem;
			color: #4D4D4D;
		}

		.daodian img {
			float: right;
			margin-right: 0.12rem;
			width: 0.15rem;
			height: 0.15rem;
		}

		ul {
			width: 100%;
			margin-top: 0.15rem!important;
		}

		ul a {
			display: block;
		}

		ul img {
			display: block;
			width: 0.5rem!important;
			height: 0.5rem!important;
			border-radius: 50%;
			margin: 0 auto;
			margin-bottom: 0.1rem;
		}

		ul div {
			margin-top: 0.06rem!important;
			width: 90%!important;
			text-align: center!important;
			font-size: 0.09rem!important;
			color: #808080!important;
		}

		.mui-table-view:after {
			height: 0!important;
		}

		.head1 em {
			float: left;
			width: 0.23rem;
			height: 0.44rem;
		}

		.swiper-wrapper {
			margin-left: -0.8rem;
		}

		.swiper-slide {
			width: 0.5rem!important;
			color: #4D4D4D;
		}

		#ljq_value_div {
			width: 0.82rem;
			height: 0.28rem;
			position: absolute;
			top: -0.35rem;
			left: 37%;
			text-align: center;
			z-index: 111;
			display: none;
		}

		#ljq_value_div span {
			display: block;
			width: 0.82rem;
			height: 0.28rem;
			line-height: 0.28rem;
			font-size: 0.09rem;
			background: url(img/value.png)no-repeat center center;
		}

		.ruler2 {
			font-size: 20px;
			padding: 10px;
		}

		#rulerWrapper2 {
			background: #B9C77A
		}

		.rulerWrapper {
			height: 0.5rem;
			background: url(img/kedubanner.png)no-repeat;
		}

		.rulerWrapper .rulerPointer {
			/*中间标志的样式*/
			border: none;
			background: red;
			height: 0.5rem;
			width: 3px;
			margin-left: 0;
		}

		.rulerWrapper .rulerScroller {
			height: 0.5rem;
		}

		.rulerWrapper .sizeNo {
			/*刻度值的位置*/
			top: 0.17rem;
			font-size: 0.09rem;
		}

		.rulerWrapper .rulerScroller ul {
			margin-top: 0!important;
			height: 0.15rem!important;
		}

		.rulerWrapper .rulerScroller1 ul {
			margin-top: 0!important;
			height: 0.15rem!important;
		}

		.rulerWrapper .rulerScroller ul:nth-last-child(7) {
			border-right: 0!important;
		}

		.rulerWrapper .rulerScroller1 ul:nth-last-child(7) {
			border-right: 0!important;
		}

		.rulerWrapper .rulerScroller1 {
			position: absolute;
			bottom: 0;
			display: flex;
		}

		.rulerWrapper .rulerScroller li {
			height: 0.1rem!important;
		}

		.rulerWrapper .rulerScroller1 li {
			height: 0.1rem!important;
		}

		.rulerWrapper .rulerScroller li:nth-last-child(6) {
			height: 0.15rem!important;
		}

		.rulerWrapper .rulerScroller1 li:nth-last-child(6) {
			margin-top: 0;
			height: 0.15rem!important;
		}


		.video_div {
			width: 100%;
			height: 270px;
			position: relative;
		}

		.luxiang {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background: #000;
			opacity: 0.4;
			height: 0.35rem;
		}

		.luxiang img {
			float: left;
			width: 0.17rem;
			height: 0.17rem;
			margin-top: 0.085rem;
		}

		.jieping {
			margin-left: 0.22rem;
		}

		.luxiang_img {
			margin-left: 0.3rem;
		}

		.luxiang em {
			float: left;
			margin-left: 0.3rem;
			margin-top: 0.08rem;
			font-size: 0.13rem;
			color: #fff;
			width: 0.3rem;
			background: #000;
			padding: 0;
		}


		.luxiang .tapeing {
			margin-left: 0.3rem;
			margin-top: 0.13rem;
			width: 0.1rem;
			height: 0.1rem;
		}

		.luxiang span {
			float: left;
			width: 0.7rem;
			margin-left: 0.1rem;
			margin-top: 0.1rem;
			font-size: 0.12rem;
			color: #fff;
		}

		.luxiang .quanping {
			float: right;
			margin-right: 0.12rem;
		}

		.qingxidu {
			position: absolute;
			left: 1.1rem;
			bottom: 0.35rem;
			width: 0.4rem;
			background: #000;
			opacity: 0.4;
		}

		.qingxidu span {
			display: block;
			font-size: 0.13rem;
			color: #fff;
			width: 0.4rem;
			text-align: center;
			margin-top: 0.05rem;
		}

		#playbtn {
			display: block;
			position: absolute;
			top: 35%;
			left: 45%;
			width: 0.5rem;
			height: 0.5rem;
		}

		#huanchong {
			position: absolute;
			top: 35%;
			left: 45%;
			width: 0.5rem;
			height: 0.5rem;
		}

		#shishi {
			width: 0.17rem;
			height: 0.17rem;
		}
	</style>
	<style>
		/*ul刻度的*/

		.xbx {
			width: 120px;
			margin-top: 0!important;
			height: 0.1rem!important;
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			width: 100px;
			float: left;
			border-right: 2px solid #eee;
			position: relative;
		}

		.xbx:first-child {
			border-left: 2px solid #eee;
		}

		.bxb {
			width: 120px;
			margin-top: 0.05rem!important;
			height: 0.1rem!important;
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			width: 100px;
			float: left;
			border-right: 2px solid #eee;
			position: relative;
		}

		.bxb:first-child {
			border-left: 2px solid #eee;
		}

		/*li刻度的*/

		.sbs {
			width: 2px;
			margin-left: 8px;
			height: 0.05rem!important;
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			list-style: none;
			float: left;
			background: #eee;
		}

		.sbs:nth-child(6) {
			height: 0.1rem!important;
		}

		.bsb {
			width: 2px;
			margin-left: 8px;
			height: 0.05rem!important;
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			list-style: none;
			float: left;
			background: #eee;
			margin-top: 0.05rem!important;
		}

		.bsb:nth-child(6) {
			height: 0.1rem!important;
			margin-top: 0!important;
		}

		/*显示的ul刻度值*/

		.sizeNo {
			width: 120px;
			font-size: 0.1rem;
			color: #eee;
			display: inline-block;
			text-align: center;
			border: 0px solid #0000CC;
			/*margin-top: 0.05rem;*/
		}

		.sizeNo:first-child {
			margin-left: -50px;
		}

		/*尺子中间的红线*/

		.rulerPointer {
			position: absolute;
			left: 50%;
			/*中间标志的样式*/
			border: none;
			background: red;
			height: 0.5rem;
			width: 3px;
			/*margin-left: -1.5px;*/
		}

		/*屏幕可见的尺子部分区域*/

		#box-ruler {
			border: 0px solid crimson;
			width: 99%;
			height: 0.5rem;
			position: relative;
			overflow: hidden;
			background: url(img/kedubanner.png) repeat;
			background-size: cover;
		}

		/*尺子对象*/

		#ruler {
			height: 0.5rem;
			width: 3000px;
			position: absolute;
			top: 0;
			left: 0;
			/*				background-color: #999;*/
		}

		/*包含尺子刻度的三个子对象*/

		.rule-div {
			width: 100%;
			height: 0.15rem;
		}

		/*时间标签值的显示框*/

		.rulerScroller {
			width: 100%;
			height: 50px;
			font-size: 0.1rem;
			z-index: 999;
		}

		#ruler-span {
			height: 0.2rem;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav head1">
		<em class="mui-action-back">
			<img class="img1" src="img/fanhui.png" alt="" />
		</em>
		<div class="div1">
			<span class="span0" id="list-shop-lists" onclick="user_select_shop();">监控查看</span>
		</div>
		<a href="tel:+18888888888">
			<img class="img2" src="img/phone.png" alt="" />
		</a>
		<input id="index-shop-lists-id" type="hidden">
		<input id="index-shop-lists" type="hidden">
	</header>
	<!--poster="img/yujiazai.gif"-->
	<div class="mui-content">
		<div class="video_div">
			<video id="video1" width="100%" height="270px" autoplay="autoplay" poster="img/yujiazai.gif" x-webkit-airplay="true" preload="true"
			 playsinline="true" webkit-playsinline="true" type="application/x-mpegURL">
				<!-- <source id="mp4_src" class="video_source" src="" type="application/x-mpegURL"> Your browser does not support HTML5 video.</source> -->
			</video>
			<div class="luxiang clearfix">
				<img src="img/jieping.png" class="jieping" alt="" />
				<img src="img/luxiang.png" class="luxiang_img" alt="" />
				<em>流畅</em>
				<img src="img/tapeing.png" class="tapeing yincang" style="display: none;" alt="" />
				<span style="display: none;" class="yincang" id="mytime">00:00:00</span>
				<img src="img/quanping.png" class="quanping" alt="" />
			</div>
			<img src="img/bofang.png" id="playbtn" alt="" style="display: none;" />
			<!--<em class="mui-spinner" id="huanchong"></em>-->
			<div class="qingxidu" style="display: none;">
				<span>高清</span>
				<span>流畅</span>
			</div>
		</div>

		<div class="rili clearfix">
			<img src="img/rili.png" alt="" id='index-date-show' data-options='{"type":"date","beginYear":1949,"endYear":3016}' />
			<div class="wai swiper-container swiper-container-horizontal">
				<div class="div clearfix swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
					<div class="swiper-slide swiper-slide-prev">
						<span id="today" class="bf_xuanzhong"></span>
					</div>
					<div class="swiper-slide swiper-slide-prev">
						<span id="day1" class="bf_xuanzhong"></span>
					</div>
					<div class="swiper-slide swiper-slide-prev">
						<span id="day2" class="bf_xuanzhong"></span>
					</div>
					<div class="swiper-slide swiper-slide-prev">
						<span id="day3" class="bf_xuanzhong"></span>
					</div>
					<div class="swiper-slide swiper-slide-prev">
						<span id="day4" class="bf_xuanzhong"></span>
					</div>
					<div class="swiper-slide swiper-slide-prev">
						<span id="day5" class="bf_xuanzhong"></span>
					</div>
					<div class="swiper-slide swiper-slide-prev">
						<span id="day6" class="bf_xuanzhong"></span>
					</div>
				</div>
			</div>
			<img id="shishi" class="" src="img/shishiblue.png" style="float: left;margin-top: 0.1rem;"></img>
		</div>

		<div class="jindu" id="box">
			<div id="ljq_value_div">
				<span class="value" id="ljq_value">00:00</span>
			</div>
			<div id="box-ruler" style="">
				<div id="ruler" style="">
					<div id="ruler-top" class="rule-div" style=""></div>
					<div id="ruler-span" class="rule-div" style=""></div>
					<div id="ruler-bottom" class="rule-div" style=""></div>
				</div>
				<div class="rulerPointer"></div>
			</div>
		</div>
		<div class="daodian">
			<a href="client_searchresult.html?xbxtype=所有客户" class="top clearfix">
				<span>最近到店</span>
				<img src="img/xiangyou.png" alt="" />
			</a>
			<ul class="mui-table-view mui-grid-view" id="zuijidaodian">

			</ul>
		</div>
	</div>
	<em style="display: none;" id="lx_start"></em>
	<em style="display: none;" id="lx_end"></em>
	<em style="display: none;" id="bf_time"></em>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.enterfocus.js"></script>
	<script src="js/app.js"></script>

	<script src="js/crypto-js.js"></script>
	<script src="js/mui.picker.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/hgs_pickerdate.js"></script>
	<script type="text/javascript" src="js/common.js?ver=20180208"></script>
	<script type="text/javascript" src="js/fuction.js"></script>
	<script src="js/echarts.js"></script>
	<script type="text/javascript">
		mui.init({
			gestureConfig: {
				tap: true, //默认为true
				doubletap: true, //默认为false
				longtap: true, //默认为false
				swipe: true, //默认为true
				drag: true, //默认为true
				hold: false, //默认为false，不监听
				release: false //默认为false，不监听
			}
		});
		//定义卷尺对象
		var ruler = document.getElementById("ruler");
		var drag_coorx = 0; //用户拖动过程中的坐标变量
		var drag_range = 0; //用户拖动的距离，在变更对象left时，要（-1），相反方向设置
		var drag_left = 0; //用户当前的left值，已经经过换算从px->int
		var setLeft = 0; //之前的 对象 left值 加上 当前 拖动后 产生的距离 
		var drag_start = 0; //判断第1次拖动的标志，在一次拖动过程中要累加，拖动结束后进行重置

		//用户拖动日期进度条开始
		ruler.addEventListener('drag', function (e) {
			var x = e.detail.touches[0].clientX; //用户拖动过程中的移动坐标	
			if (drag_start !== 0) {
				if (drag_coorx !== x) {
					drag_range = drag_coorx - x; //判断这是用户拖动时 产生的最后一个 坐标点
					//移动方法
					move_range();
					drag_coorx = x;

					//通过ruler对象的left来计算格数
					var tmplabel = judge_5min();
					$("#ljq_value").html(tmplabel);
				}
				e.detail.gesture.preventDefault(); //增加这一行代码来阻止native scroll event
			} else {
				$("#ljq_value_div").show();
				drag_coorx = x;
				drag_start++;
			}
		});

		//通过ruler对象的left来计算格数
		function judge_5min() {
			var pointerVal = Math.floor((-1) * (setLeft) / (10 * param.mult));
			//console.log(pointerVal);
			//console.log(xbbx[pointerVal]);
			return xbbx[pointerVal];
		}

		//移动的方法
		function move_range() {
			drag_range = (-1) * drag_range; //因为 拖动的方向 与 对象的移动方向 事实上是要相反的，因此*（-1）				
			drag_left = parseInt(($("#ruler").css("left").replace("px", ""))); //计算当前对象的left 值，转换成int
			setLeft = drag_left + drag_range; //之前的 对象 left值 加上 当前 拖动后 产生的距离 
			$("#ruler").css("left", (setLeft) + "px"); //设置 对象的 left值 。
		}

		//用户拖动日期进度条结束
		ruler.addEventListener('dragend', function (e) {
			drag_start = 0;
			//console.log("---------------------------");				
			//判断是否拖动越界
			if (setLeft > 0) {
				setLeft = 0; //如果setLeft 大于0，所以对象 需要回归 左派
				$("#ruler").css("left", (setLeft) + "px"); //设置 对象的 left值 。
			} else if (setLeft < ((-1) * rulerLeft)) {
				setLeft = ((-1) * rulerLeft); //如果setLeft 小于-2424，所以对象 需要回归 右派
				$("#ruler").css("left", (setLeft) + "px"); //设置 对象的 left值 。
			}

			$("#ljq_value_div").hide();

			//调用录像回放地址
			ljq_value_click();
		});
		var param = {
			wrapperId: "rulerWrapper", //标尺ID
			max: 1000, //标尺最大刻度
			minUnit: 1, //标尺最小单位刻度
			unitSet: 12, //标尺单位单位刻度组，如果是尺长，那么值为 10，如果是 小时时间，每格5分钟，那么可以是 12
			min: 0, //最小值
			mult: 1 //标尺单位刻度的倍数  最小是1 ，即每一刻度占10px，如果是2，那么每刻度则是22
		}
		//设定每个span宽度，也就是写 时间的宽度，比如02:00
		var setWidth = (param.unitSet) * param.mult * 10;
		//尺子的长度
		var rulerWidth = 0;
		var rulerLeft = 0;
		var nhtml_top = "";
		var nhtml_span = "";
		var nhtml_bottom = "";
		//console.log("span宽度：" + setWidth);
		//定义刻度时间标签值
		var xbbx = [];
		for (var i = 0; i < 1000; i++) {
			var h = 0;
			var m = 5 * i;
			var y = (m % 60);
			var x = parseInt(m / 60);
			if (x < 10) {
				var hour = "0" + x.toString();
			} else {
				var hour = x.toString();
			}
			if (y < 10) {
				var miu = "0" + y.toString();
			} else {
				var miu = y.toString();
			}
			if (x > 24) {
				xbbx[i] = "24:00";
			} else {
				xbbx[i] = hour + ":" + miu;
			}
		}
		//console.log(xbbx);
		//定义刻度时间标签值
		var sbbs = [];
		for (var i = 0; i < 30; i++) {
			if (i < 10) {
				var hour = "0" + i.toString();
			} else {
				var hour = i.toString();
			}
			sbbs[i] = hour + ":" + "00";
		}
		//console.log(sbbs);
		mui.ready(function () {
			var cw = document.body.clientWidth;
			//console.log(cw);
			$("#ruler-top").css("margin-left", cw / 2);
			$("#ruler-span").css("margin-left", cw / 2);
			$("#ruler-bottom").css("margin-left", cw / 2);
			//console.log("当前的marginleft：" + cw / 2);

			//尺子的长度
			rulerWidth = (param.unitSet) * param.mult * 10 * 25; //+ (cw / 2)每个小时的 12个5等分 * 每格是10px * 24个小时 + 超出的半个 时间标签值
			//尺子的右边可拉宽度
			rulerLeft = (param.unitSet) * param.mult * 10 * 24 - (cw / 2) + (cw / 2);

			$("#ruler").css("width", rulerWidth);
			//console.log("sb长度：" + rulerLeft);
			//console.log("尺子的长度：" + rulerWidth);
			var spanValue = 0;
			for (var i = 0; i < 25; i++) { //28
				spanValue = sbbs[i];
				//中间的刻度值
				nhtml_span += "<span class='sizeNo' style='opacity:1;width:" + setWidth + "px' data-j=" + i + ">" + spanValue + "</span>";
			}
			for (var i = 0; i < 24; i++) { //28
				//头部的刻度
				nhtml_top += "<ul  class='xbx' style=' width:" + setWidth + "px;'>";
				for (var j = 0; j < (param.unitSet - 1); j++) {
					nhtml_top += "<li class='sbs' style='width:" + 2 * param.mult + "px;margin-left:" + 8 * param.mult + "px;opacity:1;' data-j=" + j + "></li>";
				}
				nhtml_top += "</ul>";
				//底部的刻度
				nhtml_bottom += "<ul  class='bxb' style=' width:" + setWidth + "px;'>";
				for (var j = 0; j < (param.unitSet - 1); j++) {
					nhtml_bottom += "<li class='bsb' style='width:" + 2 * param.mult + "px;margin-left:" + 8 * param.mult + "px;opacity:1;' data-j=" + j + "></li>";
				}
				nhtml_bottom += "</ul>";
			}
			$("#ruler-top").html(nhtml_top);
			$("#ruler-span").html(nhtml_span)
			$("#ruler-bottom").html(nhtml_bottom)
			$(".sizeNo").eq(0).css("margin-left", -(setWidth / 2) + 'px');
		});
	</script>
	<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
	<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>

	<script>
		function play1() {
			//video播放功能
			var v = document.getElementById("video1");
			var playBtn = document.getElementById("playbtn");
			v.play();
			v.addEventListener("click", function () {//点video
				if (v.paused) {
					v.play();
					$("#playbtn").hide();
					//						$("#playbtn").attr('src','img/zanting.png');
					//						setInterval(function() {
					//							$("#playbtn").hide();
					//						}, 5000);
				} else {
					v.pause();
					$("#playbtn").show();
					//						$("#playbtn").attr('src','img/bofang.png');
					//						setInterval(function() {
					//							$("#playbtn").hide();
					//						}, 5000);
				}
			})
			playBtn.addEventListener("click", function () {//点播放按钮
				if (v.paused) {
					v.play();
					$("#playbtn").hide();
					//						$("#playbtn").attr('src','img/zanting.png');
					//						setInterval(function() {
					//							$("#playbtn").hide();
					//						}, 5000);
				} else {
					v.pause();
					$("#playbtn").show();
					//						$("#playbtn").attr('src','img/bofang.png');
					//						setInterval(function() {
					//							$("#playbtn").hide();
					//						}, 5000);
				}
			})
		}
		play1();

		var xbbx = [];
		for (var i = 0; i < 1000; i++) {
			var h = 0;
			var m = 5 * i;
			var y = (m % 60);
			var x = parseInt(m / 60);

			if (x < 10) {
				var hour = "0" + x.toString();
			} else {
				var hour = x.toString();
			}

			if (y < 10) {
				var miu = "0" + y.toString();
			} else {
				var miu = y.toString();
			}

			if (x > 24) {
				xbbx[i] = "24:00";
			} else {
				xbbx[i] = hour + ":" + miu;
			}
		}
			//console.log(xbbx);


	</script>
	<script>
		$(document).ready(function () {
			//日期轮播
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				prevButton: '.swiper-button-next',
				nextButton: '.swiper-button-prev',
				slidesPerView: 4,
				centeredSlides: true,
				paginationClickable: true,
				spaceBetween: 1,
				grabCursor: true,
				loop: false,
				autoplay: false,
				loopedSlides: 7,
				autoplayDisableOnInteraction: false
			});

			//录像显示时间的开始与结束
			function two_char(n) {
				return n >= 10 ? n : "0" + n;
			}
			var sec = 0;
			var myVar = '';
			function myTimer() {
				sec++;
				var date = new Date(0, 0)
				date.setSeconds(sec);
				var h = date.getHours(),
					m = date.getMinutes(),
					s = date.getSeconds();
				document.getElementById("mytime").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s);
			}
			function myStopFunction() {
				clearInterval(myVar);
			}



			//截屏
			$(".jieping").click(function () {
				var video = document.getElementById('video1');
				var canvas = document.createElement("canvas");
				canvas.width = $('#video1').width();
				canvas.height = $('#video1').height();
				canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
				var imgUrl = canvas.toDataURL();
				
				console.log(1111, imgUrl)
				mui.toast("已保存到我的相册")
			})
			//清晰度切换
			$(".luxiang em").click(function () {
				$(".qingxidu").toggle();
			})
			$(".qingxidu span").click(function () {
				$(".luxiang em").html($(this).text());
				$(".qingxidu").hide();

				//开始播放 视频  直播
				if ($(this).text() == "高清") {
					shishi_video_url = user_info.video.te_rtsp_0;
				} else {
					shishi_video_url = user_info.video.te_rtsp_1;
				}
				//调用 实时直播的 点击事件
				$("#shishi").click();
			})
			//全屏事件
			$(".quanping").click(function (e) {
				if ($(this).attr('src') == 'img/quanping.png') {
					//进入全屏
					$(".video_div").css('height', '100%');
					$(".video_div").css('width', '100%');
					$("video").height('100%');
					$("video").width("100%");
					$("#playbtn").css('top', '45%');
					$("#huanchong").css('top', '45%');
					$(this).attr('src', 'img/tuichu_quanping.png');
					$(".rili").hide();
					$(".jindu").hide();
					$(".daodian").hide();
					$(".head1").hide();
				} else {
					//退出全屏
					$(".video_div").css('height', '270px');
					$(".video_div").css('width', '100%');
					$("video").height('270px');
					$("video").width("100%");
					$("#playbtn").css('top', '35%');
					$("#huanchong").css('top', '35%');
					$(this).attr('src', 'img/quanping.png');
					$(".rili").show();
					$(".jindu").show();
					$(".daodian").show();
					$(".head1").show();
				}

			})
			//进行录像
			$(".luxiang_img").click(function () {
				if ($(".yincang").css('display') == "none") {
					$(this).attr('src', 'img/luxiang_xuan.png');
					$(".yincang").css('display', 'block');
					myVar = setInterval(function () {
						myTimer()
					}, 1000);
					var myDate = new Date(); //获取当前年
					var year = myDate.getFullYear(); //获取当前月
					var month = myDate.getMonth() + 1; //获取当前日
					var date = myDate.getDate();
					var h = myDate.getHours(); //获取当前小时数(0-23)
					var m = myDate.getMinutes(); //获取当前分钟数(0-59)
					var s = myDate.getSeconds();
					var lx_start = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
					$("#lx_start").html(lx_start);
				} else {
					$(this).attr('src', 'img/luxiang.png');
					$(".yincang").css('display', 'none');
					document.getElementById("mytime").innerText = "00:00:00";
					sec = 0;
					myStopFunction();
					var myDate = new Date(); //获取当前年
					var year = myDate.getFullYear(); //获取当前月
					var month = myDate.getMonth() + 1; //获取当前日
					var date = myDate.getDate();
					var h = myDate.getHours(); //获取当前小时数(0-23)
					var m = myDate.getMinutes(); //获取当前分钟数(0-59)
					var s = myDate.getSeconds();
					var lx_end = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
					$("#lx_end").html(lx_end);
					security_video_add();
				}
			})
			
			var vide_token = localStorage.getItem(VIDEO_TOKEN);
			vide_token = JSON.parse(vide_token);
			console.log(vide_token)
			function callback(data) {
				console.log(444,data)
			}
			if(!vide_token){
				$.ajax({
					url: 'http://127.0.0.1:3000/',
					success: function (data) {
						console.log(1111, data)
						if (data.code == '200') {
							localStorage.setItem(VIDEO_TOKEN, JSON.stringify(data.data));
						}
					},
					error:function(error){
						console.log(3333, error)
					},
					complete:function(data){
						console.log(2222, data)
					}
				})
			}
			

			// var formItem = document.createElement('form');
			// formItem.action = 'https://open.ys7.com/api/lapp/token/get';
			// formItem.method = "POST"; 
			// var input = document.createElement("input");
			// // 设置相应参数 
			// input.type = "text";
			// input.name = "appKey";
			// input.value = VIDEO_APPKEY; 
			// formItem.appendChild(input); 

			// var input = document.createElement("input");
			// // 设置相应参数 
			// input.type = "text";
			// input.name = "appSecret";
			// input.value = VIDEO_SECRET; 
			// formItem.appendChild(input); 

			// formItem.submit();
			// document.body.removeChild(formItem); 
		})
	</script>

	<!--/********************日期控件**************************/-->
	<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
	<!--/********************日期控件**************************/-->
	<input id="index-shop-lists-id" type="hidden">
	<input id="index-shop-lists" type="hidden">
	<input id='index-end-date' type="hidden" />
	<input id='index-start-date' type="hidden" />

	<!--/***************************************************/-->
	<script type="text/javascript">
		//用户选择的 直播模式
		var shishi_video_url = "";
		//每隔5分钟，跑一格 时间格	
		var int = 0;

		mui.ready(function () {
			//获取当前的客户数据
			xminereadyload();
			shishi_video_url = user_info.video.te_rtsp_1;

			//实时点播的公用方法
			fun_shishi_update();
		});

		//每隔5分钟，跑一格 时间格
		function minute_5_interval() {
			int = self.setInterval("minuite5_move()", 300000);
		}


		//实时点播时-时间进度进行移动
		function minuite5_move() {
			var myDate = new Date(); //获取当前年
			console.log(myDate + "***********************************************************************************5分钟到了");

			//当前时间
			var myDate = new Date(); //获取当前年
			var year = myDate.getFullYear(); //获取当前月
			var month = myDate.getMonth() + 1; //获取当前日
			var date = myDate.getDate();
			var h = myDate.getHours(); //获取当前小时数(0-23)
			var m = myDate.getMinutes(); //获取当前分钟数(0-59)

			var lx_num = 12 * h + parseInt(m / 5);
			var zong = -(10 * lx_num) + "px";
			$("#ruler").css('left', zong);
		}

		//实时点播的公用方法
		function fun_shishi_update() {
			//获取  3.70 最新客户列表
			guest_lists();

			//获取当天的日期	
			var xtoday = GetDateStr(0);
			$("#ljq_value").attr("ljq_date", xtoday);

			var day1 = GetDateStr(-1);
			var day2 = GetDateStr(-2);
			var day3 = GetDateStr(-3);
			var day4 = GetDateStr(-4);
			var day5 = GetDateStr(-5);
			var day6 = GetDateStr(-6);

			$("#today").html(xtoday.substr(5, 10));
			$("#day1").html(day1.substr(5, 10));
			$("#day2").html(day2.substr(5, 10));
			$("#day3").html(day3.substr(5, 10));
			$("#day4").html(day4.substr(5, 10));
			$("#day5").html(day5.substr(5, 10));
			$("#day6").html(day6.substr(5, 10));

			$("#today").attr("ljq_days", xtoday);
			$("#day1").attr("ljq_days", day1);
			$("#day2").attr("ljq_days", day2);
			$("#day3").attr("ljq_days", day3);
			$("#day4").attr("ljq_days", day4);
			$("#day5").attr("ljq_days", day5);
			$("#day6").attr("ljq_days", day6);

			//实时点播时-时间进度进行移动
			minuite5_move();

			//开始播放 视频  直播
			shishidz(shishi_video_url);

			//每隔5分钟，跑一格 时间格
			minute_5_interval();
		}

		//被日期控件调用的方法
		function hgs_picker_fun() {
			var dateValue = $("#index-date-show").text();
			$("#today").html(dateValue.substr(5, 5));
			$("#today").attr("ljq_days", dateValue);
			$("#ljq_value").attr("ljq_date", dateValue);
			$("#ljq_value").html("00:00");
			$(".rulerScroller").css('left', '-52.5px');
			$(".rulerScroller1").css('left', '-52.5px');

			dateValue = datebian(-1, dateValue);
			$("#day1").html(dateValue.substr(5, 5));
			$("#day1").attr("ljq_days", dateValue);

			dateValue = datebian(-1, dateValue);
			$("#day2").html(dateValue.substr(5, 5));
			$("#day2").attr("ljq_days", dateValue);

			dateValue = datebian(-1, dateValue);
			$("#day3").html(dateValue.substr(5, 5));
			$("#day3").attr("ljq_days", dateValue);

			dateValue = datebian(-1, dateValue);
			$("#day4").html(dateValue.substr(5, 5));
			$("#day4").attr("ljq_days", dateValue);

			dateValue = datebian(-1, dateValue);
			$("#day5").html(dateValue.substr(5, 5));
			$("#day5").attr("ljq_days", dateValue);

			dateValue = datebian(-1, dateValue);
			$("#day6").html(dateValue.substr(5, 5));
			$("#day6").attr("ljq_days", dateValue);

			guest_lists();
			$(".div #today").addClass("blue");
			$("#shishi").attr('src', 'img/shishi.png');

			//
			ljq_value_click();
		}

		//实时直播--右侧图标点击
		$("#shishi").click(function () {
			$(".div .swiper-slide").removeClass("blue");
			$(".div span").removeClass("blue");
			$(this).attr('src', 'img/shishiblue.png');

			//实时点播的公用方法
			fun_shishi_update();

		})

		$(".swiper-slide").click(function () {
			$(this).addClass("blue").siblings().removeClass("blue");
			$("#shishi").attr('src', 'img/shishi.png');
			$(".div span").removeClass("blue");
		})


		//日期
		$(".bf_xuanzhong").click(function () {
			var ljq_days = $(this).attr("ljq_days");
			$("#ljq_value").attr("ljq_date", ljq_days);
			$("#ljq_value").html("00:00");
			$("#ruler").css("left", (0) + "px"); //设置 对象的 left值 。
			ljq_value_click();
		})


		//
		function ljq_value_click() {
			var bf_time = $("#ljq_value").attr('ljq_date');
			var slice = $("#ljq_value").html();
			security_video_play(bf_time, slice);
		}

		//获取 店铺  3.70 最新客户列表
		function guest_lists() {
			var xbx = {}; //登录后的参数对象AES加密
			xbx.shop_id = user_info.look_shop_id; //是 店铺ID
			xbx.te_sn = user_info.video.te_sn;
			xbx.page = 1;
			xbx.limit = 10;
			official_login_after(url_host + 'guest/lists', xbx, 'guest_lists');
		}

		function guid() {
			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
				var r = Math.random() * 16 | 0,
					v = c == 'x' ? r : (r & 0x3 | 0x8);
				return v.toString(16);
			});
		}
		var uuid = guid();
		//播放安防录像
		function security_video_play(bf_time, slice) {
			//var bf_time = $("#bf_time").html();
			var xbx = {}; //登录后的参数对象AES加密
			xbx.client_id = uuid; //客户端唯一id
			xbx.shop_id = user_info.look_shop_id; //是 店铺ID
			xbx.user_id = user_info.id; //用户id
			xbx.device_id = user_info.video.device_id; //设备id
			xbx.te_sn = user_info.video.te_sn; //设备号
			xbx.date = bf_time; //日期
			slice = slice.replace(':', '.');//把':'改成'.'
			xbx.slice = slice; //小时
			//console.log(xbx);
			official_login_after(url_host + 'security/video/play', xbx, 'security_video_play');
		}
		//添加安防录像
		function security_video_add() {
			var start_time = $("#lx_start").html();
			var end_time = $("#lx_end").html();
			var xbx = {}; //登录后的参数对象AES加密
			xbx.shop_id = user_info.look_shop_id; //是 店铺ID
			xbx.user_id = user_info.id; //用户id
			xbx.device_id = user_info.video.device_id; //设备id
			xbx.te_sn = user_info.video.te_sn; //设备号
			xbx.start_time = start_time; //开始时间
			xbx.end_time = end_time; //结束时间
			official_login_after(url_host + 'security/video/add', xbx, 'security_video_add');
		}
	</script>

	<script>
		//开始播放 视频  直播
		var hls = new Hls();
		function shishidz(te_rtsp_link) {
			if (Hls.isSupported()) {
				var video = document.getElementById('video1');

				//te_rtsp_link = 'http://video.dianliubao.com/live?te_sn=00e070747d47';
				//http://video.dianliubao.com:8080/hls/00e070747d47.m3u8
				console.log("当前正在播放的视频：" + te_rtsp_link);
				hls.loadSource(te_rtsp_link);
				hls.attachMedia(video);
				hls.on(Hls.Events.MANIFEST_PARSED, function () {
					video.play();
				});
			}
			// 
			//$("#video1").attr("src",te_rtsp_link).attr("autoplay","true"); 
		}
	</script>
</body>

</html>